<script type="text/javascript" src="../../static/js/fileinput/fileinput.js"
        th:src="@{/js/fileinput/fileinput.js}"></script>
<link rel="stylesheet" href="../../static/css/fileinput/fileinput.css" type="text/css"
      th:href="@{/css/fileinput/fileinput.css}"/>

<style type="text/css">
    #map {
        position: relative;
        height: 510px;
        border: 1px solid #3473b7;
    }

    #toolbar {
        position: relative;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    .win_bg {
        background: #CCC;
        opacity: 0.2;
        filter: alpha(opacity=20);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 998;
    }

    .winTitle {
        background: #337ab7;
        height: 25px;
        line-height: 25px
    }

    .winTitle .title_left {
        font-weight: bold;
        color: #FFF;
        padding-left: 5px;
        float: left
    }

    .winTitle .title_right {
        float: right;
        padding-right: 3px;
    }

    .winTitle .title_right a {
        color: #FFF;
        text-decoration: none;
        padding-right: 3px;
    }

    .winTitle .title_right a:hover {
        text-decoration: underline;
        color: #FF0000;
        padding-right: 3px;
    }

    .transferPreference {
        border: 1px solid #D6E3F1;
        height: 20px;
        margin: 1px 30%;
        padding: 0 12px;
    }

    .winContent {
        padding: 5px;
        overflow-y: auto;
        height: 550px;
    }

    .popupWindow {
        right: 20px;
        top: 100px;
        position: absolute;
        width: 400px;
        height: 600px;
        border: 2px solid #D6E3F1;
        background: #FFF;
        z-index: 9999;
    }

    .label-color {
        background-color: #4d98dd;
        color: #ffffff;
    }
</style>
<input type="hidden" id="SERVERIP" th:value="${SERVERIP}" />
<input type="hidden" id="LNGSTR" th:value="${LNG}" />
<input type="hidden" id="LATSTR" th:value="${LAT}" />
<form id="eventAddForm" method="post" action="" enctype="multipart/form-data" data-parsley-validate=""
      class="form-horizontal form-label-left" novalidate="">
    <div class="row">
        <div class="col-md-4">
            <div class="x_panel">
                <div class="x_title">
                    <h2 style="width: 100%">社区信息员上报
                        <small></small>
                    </h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    <div class="col-md-6" style="display: none">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">用户：</label>
                            <div class="col-md-9 col-sm-3">
                                <input type="text" class="form-control" id="empId" name="empId"/>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">事件类型：</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <select class="select2_single form-control" tabindex="-1" disabled>
                                    <option value="">--请选择--</option>
                                    <option value="网格类" >网格类</option>
                                    <option value="治安类" th:selected="${true}">治安类</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-md-12">-->
                        <!--<div class="form-group">-->
                            <!--<label class="control-label col-md-3 col-sm-3 col-xs-12">上报至：</label>-->
                            <!--<div class="col-md-9 col-sm-9 col-xs-12">-->
                                <!--<select class="select2_single form-control" tabindex="-1" disabled>-->
                                    <!--<option value="">&#45;&#45;请选择&#45;&#45;</option>-->
                                    <!--<option value="上报社区">上报社区</option>-->
                                    <!--<option value="直报街道">直报街道</option>-->
                                <!--</select>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">事件标题：</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" name="eventTitle" id="event_title" class="form-control" th:value="${publicSecurity.eventTitle}" disabled/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">事件位置：</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input type="text" name="eventLocation" id="event_location" class="form-control" th:value="${publicSecurity.eventLocation}" disabled/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12" th:if="${grid != null}">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">网格：</label>
                            <div class="col-md-9 col-sm-3">
                                <input type="text" class="form-control" id="grid_name" name="grid_name"  readonly="readonly" th:value="${grid?.gridName}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">经度：</label>
                            <div class="col-md-9 col-sm-4 col-xs-12">
                                <input id="lng" readonly="readonly" type="text" class="form-control" name="lng" th:value="${publicSecurity.lng}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12">纬度：</label>
                            <div class="col-md-9 col-sm-4 col-xs-12">
                                <input id="lat" readonly="readonly" type="text" class="form-control" name="lat" th:value="${publicSecurity.lat}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" >事件详情：</label>
                            <div class="col-md-9 col-sm-9 col-xs-12" >
                                <textarea class="form-control" rows="3" name="eventContent" id="event_content" th:text="${publicSecurity.eventContent}" disabled />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" >解决陈述：</label>
                            <div class="col-md-9 col-sm-9 col-xs-12" >
                                <textarea class="form-control" rows="3" name="publicSecurityContent" id="public_security_content" th:text="${publicSecurity.publicSecurityContent}" disabled />
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-md-12">-->
                        <!--<div class="form-group">-->
                            <!--<label class="control-label col-md-3 col-sm-3 col-xs-12">图片：</label>-->
                            <!--<div class="col-md-9 col-sm-9 col-xs-12">-->
                                <!--<input type="file" id="imgFile" name="imgFile"/>-->
                                <!--<input type="hidden" id="imgStr" name="imgStr"/>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label class="control-label col-md-3 col-sm-3 col-xs-12">音频：</label>-->
                            <!--<div class="col-md-9 col-sm-9 col-xs-12">-->
                                <!--<input type="file" id="audioFile" name="audioFile"/>-->
                                <!--<input type="hidden" id="audioStr" name="audioStr"/>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label class="control-label col-md-3 col-sm-3 col-xs-12">视频：</label>-->
                            <!--<div class="col-md-9 col-sm-9 col-xs-12">-->
                                <!--<input type="file" id="vedioFile" name="vedioFile"/>-->
                                <!--<input type="hidden" id="vedioStr" name="vedioStr"/>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="ln_solid col-md-12"></div>
                    <div class="col-md-12 col-md-offset-3">
                        <div class="form-group">
                            <input id="messageAccessoryIds" th:value="${publicSecurity.messageAccessoryIds}" type="hidden">
                            <button type="button" class="btn btn-success" th:if="${publicSecurity.messageAccessoryIds != ''}" onclick="getEventAccessory()">查看附件</button>
                            <button type="button" class="btn btn-success" th:if="${publicSecurity.messageAccessoryIds == ''}" disabled>查看附件</button>
                            <button type="button" id="blackBtn" class="btn btn-success">返回</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="x_panel">
                <div id='result' class='container'></div>
                <div id="map" style=" width: 100%;">
                </div>
            </div>
        </div>
    </div>
</form>
<!-- Modal -->
<div class="modal fade" id="ModalInfo" tabindex="-1" role="dialog" aria-labelledby="ModalInfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">附件信息</h4>
            </div>
            <div class="modal-body">
                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="2myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#2tab_content12" id="2home-tab2" role="tab"
                                                                  data-toggle="tab" aria-expanded="true">图片</a>
                        </li>
                        <li role="presentation" class=""><a href="#video" role="tab" id="2profile-tab12"
                                                            data-toggle="tab" aria-expanded="false">视频</a>
                        </li>
                        <li role="presentation" class=""><a href="#audio" role="tab" id="2profile-tab22"
                                                            data-toggle="tab" aria-expanded="false">音频</a>
                        </li>
                    </ul>
                    <div id="picture" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="2tab_content12"
                             aria-labelledby="profile-tab">
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <!--<ol class="carousel-indicators">-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
                                <!--</ol>-->
                                <!-- Wrapper for slides -->
                                <div id="eventImg" class="carousel-inner" role="listbox">

                                </div>
                                <!-- Controls -->
                                <!--<a class="left carousel-control" href="#carousel-example-generic" role="button"-->
                                   <!--data-slide="prev">-->
                                    <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
                                    <!--<span class="sr-only">Previous</span>-->
                                <!--</a>-->
                                <!--<a class="right carousel-control" href="#carousel-example-generic" role="button"-->
                                   <!--data-slide="next">-->
                                    <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
                                    <!--<span class="sr-only">Next</span>-->
                                <!--</a>-->
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="video" aria-labelledby="profile-tab">
                            <div id="mp4" style="width: 100%; min-height: 120px; height: auto; max-height: 280px;  overflow:hidden; overflow-y: scroll;">

                            </div>
                        </div>
                        <div role="tabpanel" id="audio" class="tab-pane fade" aria-labelledby="profile-tab">
                            <div id="mp3" style="width: 100%; min-height: 120px; height: auto; max-height: 280px;  overflow:hidden; overflow-y: scroll;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 地图 -->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $("#map").height($(window).height() - 138);
    $(window).resize(function () {
        $("#map").height($(window).height() - 138)
    });
    var lng = eval([[${lng}]]);
    var lat = eval([[${lat}]]);
    var SERVERIP = $("#SERVERIP").val(), LNGSTR = $("#LNGSTR").val(), LATSTR = $("#LATSTR").val();
    var map, local, layer,marker,layerCH, layerHarbin, vectorLayer, vectorLayer1, drawPolygon2, markerLayer, drawPoint, drawLine,
        style,
        url =SERVERIP+ HB_SERVER_IP,
        url1 =SERVERIP+ HB_GRID_SERVER,
        urlCH = SERVERIP + HB_SERVER_CH,
        url2 =SERVERIP+ HB_DATA_SERVER;

    $(function () {
        map = new SuperMap.Map("map", {
            controls: [
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation(),
                new SuperMap.Control.LayerSwitcher()
            ],
            units: "m", allOverlays: true
        });
        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, {maxResolution: "auto"});
        layer.events.on({"layerInitialized": addLayer1});
        vector = new SuperMap.Layer.Vector("vector");
        markerlayer = new SuperMap.Layer.Markers("markerLayer");


        //清空图层
        vector.removeAllFeatures();
        if (marker != undefined) { markerlayer.removeMarker(marker);}
        var point = new SuperMap.Geometry.Point(lng, lat);
        //给点定义样式，此处是超图的矢量图
        pointVector = new SuperMap.Feature.Vector(point);
        pointVector.style = {
            fillColor: "#fff", //内圈颜色
            strokeColor: "#fff", //外圈颜色
            pointRadius: 1 //点的大小
        };

        //图片大小限制
        var size = new SuperMap.Size(44, 33);
        //偏移量
        var icon = new SuperMap.Icon('../images/1111.gif', size);
        marker = new SuperMap.Marker(new SuperMap.LonLat(lng, lat), icon);
        //打点
        vector.addFeatures(pointVector);
        markerlayer.addMarker(marker);

    });

    //加载
    function addLayer1() {
        layerCH = new SuperMap.Layer.TiledDynamicRESTLayer("中文注释", urlCH, {
            transparent: true,
            cacheEnabled: true
        });
        layerCH.events.on({
            "layerInitialized": addLayer2
        });
        layerCH.setOpacity(0.9);
    }

    function addLayer2() {
        map.addLayers([layer,layerCH, vector,markerlayer]);
        //显示地图范围
        map.setCenter(new SuperMap.LonLat(LNGSTR,LATSTR), 13);
    }



    /*]]>*/
</script>
<!-- 方法 -->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    $('#blackBtn').click(function () {
        $.goTo(/*[[@{/publicsecurity/toPublicList}]]*/"./public_list.html");
    });


    function getEventAccessory() {
        var messageAccessoryIds = $("#messageAccessoryIds").val();
        var img = "";
        var mp4 = "";
        var mp3 = "";

        $.post("/publicsecurity/getEventAccessory", {"eventId": messageAccessoryIds}, function (result) {
            $("#mp3").empty();
            $("#mp4").empty();
            $("#eventImg").empty();
            $.each(result, function (index, item) {
                if (item.accessoryType == "1") {
                    img += "<div class='item '>" +
                        "<img src='" + item.accessoryPath + "' alt='...'>" +
                        "<div class='carousel-caption'>" +
                        "</div>" +
                        "</div>"
                }

                if (item.accessoryType == "3") {
                    //视频
                    mp4 += "<video width='320' height='240' controls>" +
                        " <source  src='" + item.accessoryPath + "' width='352' height='264' controls autobuffer type='video/mp4'>" +
                        "       您的浏览器不支持 HTML5 video 标签。" +
                        "</video>"
                }

                if (item.accessoryType == "2") {
                    //音频
                    mp3 += "<audio controls>" +
                        "<source  height='100' width='352' src='" + item.accessoryPath + "' type='audio/ogg'>" +
                        " 您的浏览器不支持 audio 元素。" +
                        "</audio>"
                }
            });

            $("#mp3").append(mp3);
            $("#mp4").append(mp4);
            $("#eventImg").append(img);
            $("#eventImg").find(".item").eq(0).addClass("active");
            $("#ModalInfo").modal('show');
        });
    }

    /*]]>*/
</script>


